<template>
    <div class="merchant-page">
       <div>
           <el-form>
                <el-form-item label="业务员姓名：">
                    <el-input placeholder="请输入业务员姓名" v-model="searchForm.name" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="业务员手机号：">
                    <el-input placeholder="请输入业务员手机号" v-model="searchForm.phone" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="添加时间 ：">
                    <div class="block">
                   <el-date-picker size="small" v-model="searchTime" type="datetimerange" @change="changeTime" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期"
                     end-placeholder="结束日期"></el-date-picker>
                    </div>
                </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
                   <el-button class="search-btn" @click="showDialog">添加业务员</el-button>
               </el-form-item>

           </el-form>
       </div>
       <div>
           <el-table :data="tableData" border>
               <el-table-column prop="phone" label="业务员手机号码"></el-table-column>
               <el-table-column prop="name" label="业务员姓名"></el-table-column>
               <el-table-column prop="we_chat" label="业务员微信"></el-table-column>
               <el-table-column prop="qq" label="业务员qq"></el-table-column>
               <el-table-column prop="create_time" label="添加时间"></el-table-column>
               <el-table-column prop="scale" label="分佣比例"></el-table-column>
               <el-table-column prop="commission" label="佣金余额"></el-table-column>
               <el-table-column  label="操作">
                 <div slot-scope="scope">
                   <div><el-button class="edit-btn" @click="showScaleDialog(scope.row.id)">设置分佣比例</el-button></div>
                 </div>
               </el-table-column>
           </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div>
       </div>
       <el-dialog title="添加业务员" :visible.sync="salesmanDialog" width="500px">
           <div>
               <el-form :model="salesmanForm" ref="bindBank">
                   <el-form-item label="业务员手机号：" prop="phone">
                       <el-input placeholder="请输入业务员手机号" v-model="salesmanForm.phone" size="small" clearable></el-input>
                   </el-form-item>
                   <el-form-item label="业务员姓名：" prop="name">
                       <el-input placeholder="请输入业务员姓名" v-model="salesmanForm.name" size="small" clearable></el-input>
                   </el-form-item>
                   <el-form-item label="业务员微信：" prop="we_chat">
                       <el-input placeholder="请输入业务员微信" v-model="salesmanForm.we_chat" size="small" clearable></el-input>
                   </el-form-item>
                   <el-form-item label="业务员QQ：" prop="qq">
                       <el-input placeholder="请输入业务员QQ" v-model="salesmanForm.qq" size="small" clearable></el-input>
                   </el-form-item>
                   <el-form-item label="备注：" prop="remark">
                       <el-input placeholder="请输入备注" v-model="salesmanForm.remark" size="small" clearable></el-input>
                   </el-form-item>
               </el-form>
           </div>
           <span slot="footer" class="dialog-footer">
             <el-button @click="salesmanDialog = false" class="cancle-btn">取 消</el-button>
             <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="submitSalesman">确 定</el-button>
           </span>
         </el-dialog>
         <el-dialog title="设置分佣比例" :visible.sync="isShowScaleDialog" width="500px">
             <div>
                 <el-form :model="scaleForm">
                     <el-form-item label="分佣比例：">
                         <el-input placeholder="请输入分佣比例" v-model.number="scaleForm.scale" size="small" clearable></el-input>
                     </el-form-item>
                 </el-form>
             </div>
             <span slot="footer" class="dialog-footer">
               <el-button @click="isShowScaleDialog = false" class="cancle-btn">取 消</el-button>
               <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="submitScale">确 定</el-button>
             </span>
           </el-dialog>
    </div>

</template>
<script>
import {apiSaleManList,apiAddSaleMan,apiSetSaleManScale} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    phone: '',
                    name: '',
                    pageSize: 10,
                    page: 1,
                    token: window.sessionStorage.getItem("token"),
                    startCreateTime: '',
                    endCreateTime: '',
                },
                pageTotal: 0,
                searchTime: [],
                salesmanDialog: false,
                submitOptLoading: false,
                promoteList: [],
                salesmanForm: {
                  token: window.sessionStorage.getItem("token"),
                  phone: '',
                  name: '',
                  we_chat: '',
                  qq: '',
                  remark: ''
                },
                isShowScaleDialog: false,
                scaleForm:{
                  token: window.sessionStorage.getItem("token"),
                  saleManId: 0,
                  scale: ''
                }
            }
        },
        created () {
            this.getTableData()
        },
        methods:{
          showScaleDialog(id){
            this.isShowScaleDialog = true
            this.scaleForm = {
              token: window.sessionStorage.getItem("token"),
              saleManId: id,
              scale: ''
            }
          },
          submitScale(){
            if(!this.scaleForm.scale){
               this.$message.error('分佣比例不能为空')
               return
            }
            this.submitOptLoading = true
            apiSetSaleManScale(this.scaleForm).then(res =>{
               this.submitOptLoading = false
                if(res.code == 1){
                    this.$message.success('设置成功')
                    this.isShowScaleDialog = false
                    this.getTableData()
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(res => {
               this.isShowScaleDialog = false
               this.submitOptLoading = false
               this.$message.error(res.msg)
            })
          },
            getTableData (){
                apiSaleManList(this.searchForm).then(res =>{
                    this.tableData = res.msg.res
                    this.pageTotal = res.msg.con
                }).catch(res => {

                })
            },
            showDialog(){
              this.salesmanDialog = true
              this.salesmanForm = {
                  token: window.sessionStorage.getItem("token"),
                  phone: '',
                  name: '',
                  we_chat: '',
                  qq: '',
                  remark: ''
              }
            },
            submitSalesman(){
              if(!this.salesmanForm.phone){
                 this.$message.error('业务员手机号不能为空')
                 return
              }
              if(!this.salesmanForm.name){
                 this.$message.error('业务员姓名不能为空')
                 return
              }
              this.submitOptLoading = true
              apiAddSaleMan(this.salesmanForm).then(res =>{
                 this.submitOptLoading = false
                  if(res.code == 1){
                      this.$message.success('添加成功')
                      this.salesmanDialog = false
                      this.getTableData()
                  } else {
                      this.$message.error(res.msg)
                  }
              }).catch(res => {
                 this.salesmanDialog = false
                 this.submitOptLoading = false
                 this.$message.error(res.msg)
              })
            },
            searchData(){
                this.getTableData()
            },
            handleSizeChange(val){
                this.searchForm.pageSize = val;
      	        this.getTableData()
            },
            handleCurrentChange(val){
                this.searchForm.page = val;
      	        this.getTableData()
            },
            changeTime(val){
                 if (this.searchTime == null) {
                     this.searchForm.startCreateTime = ''
                     this.searchForm.endCreateTime = ''
                } else{
                  this.searchForm.startCreateTime =  this.changeTimestamp(val[0])
                  this.searchForm.endCreateTime =  this.changeTimestamp(val[1])

                }
            },
            changeTimestamp(time){
               var date = new Date(time)
               var Y = date.getFullYear() + '-';
               var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
               var D = (date.getDate() < 10 ? '0' +  date.getDate() : date.getDate()) + ' ';
               var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
               var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
               var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
               return Y + M + D + h + m + s;
            },
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.confirm-btn {
           background: #4b95ff;
           color: #ffffff;
       }
.edit-btn {
  padding: 8px 15px;
  color: #ffffff;
  background: #0e7cee;
}
</style>
